<template>
  <div class="mouseEvent-container common-container">
    <div class="left-card-container"></div>
    <div class="event-content">
      <div class="event-classify">
        <div class="classify-container">
          <div
            class="classify-name"
            :class="{'checkEvent': checkIndex == 1}"
            @click="checkType(1)"
          >拖拽选中文字</div>
          <div
            class="classify-name"
            :class="{'checkEvent': checkIndex == 2}"
            @click="checkType(2)"
          >右键复制文字</div>
          <div
            class="classify-name"
            :class="{'checkEvent': checkIndex == 3}"
            @click="checkType(3)"
          >自定义右键菜单</div>
        </div>
      </div>
      <div class="event-classify-content">
        <div class="classify-example-container">
          <div class="select-classify" v-if="checkIndex == 1">
            <div class="select-content" onselectstart="return false" v-if="!selectFlag">
              <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
            </div>
            <div class="select-content" onselectstart="return true" v-if="selectFlag">
              <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
            </div>
            <div class="select-change">
              <div class="change-button" @click="selectFlag = !selectFlag">{{ selectFlag ? '禁止选中' : '允许选中'}}</div>
            </div>
          </div>
          <div class="copy-classify" v-if="checkIndex == 2">
            <div class="select-content" v-if="!copyFlag">
              <p oncopy="return false">Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
            </div>
            <div class="select-content" v-if="copyFlag">
              <p oncopy="return true">Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
            </div>
            <div class="select-change">
              <div class="change-button" @click="copyFlag = !copyFlag">{{ copyFlag ? '禁止复制' : '允许复制'}}</div>
            </div>
          </div>
          <div class="rightKey-classify" v-if="checkIndex == 3">
            <div class="common-menu chart-menu" @contextmenu.prevent="rightClick($event,1)"
            >Echarts 可视化图表
              <RightClickMenu :left="clientX" :top="clientY" @ok="operatingRightAction" :data="menu" />
            </div>
            <div class="common-menu table-menu" @contextmenu.prevent="rightClick($event,2)"
            >Tables 多样化表格
              <RightClickMenu :left="clientX" :top="clientY" @ok="operatingRightAction" :data="menu" />
            </div>
            <div class="common-menu components-menu" @contextmenu.prevent="rightClick($event,3)"
            >components 常用功能组件
              <RightClickMenu :left="clientX" :top="clientY" @ok="operatingRightAction" :data="menu" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RightClickMenu from '@/components/RightClickMenu/index.vue'
export default {
  name: 'index',
  components:{
    RightClickMenu,
  },
  data(){
    return{
      checkIndex: 3,
      selectFlag: false,
      copyFlag: false,
      clientX: 0,
      clientY: 0,
      rightMenu: {
        echartsMenu: [
          { label: '迁徙图', value: 1, path:'/echarts/migration'},
          { label: '柱状图', value: 2, path:'/echarts/bar'},
          { label: '关系图', value: 3, path:'/echarts/graph'},
          { label: '饼图', value: 4, path:'/echarts/pie'},
          { label: '简单图表', value: 5, path:'/echarts/simple'},
        ],
        tablesMenu: [
          { label: '综合表格', value: 1, path:'/table/comprehensive'},
          { label: '行内编辑表格', value: 2, path:'/table/inline-table'},
          { label: '可编辑表格', value: 3, path:'/table/editableProTable'},
        ],
        componentsMenu: [
          { label: 'markdown编辑器', value: 1, path:'/other/mark-down'},
          { label: '头像裁剪', value: 2, path:'/other/cropper'},
          { label: '卡片拖拽', value: 3, path:'/other/card-drag'},
          { label: '生成二维码', value: 4, path:'/other/qrcode'},
          { label: '阿里图标库', value: 5, path:'/other/iconfont'},
        ],
      },
      menu: [],
    }
  },
  methods:{
    checkType(type){
      switch (type){
        case 1:
          this.checkIndex = type;
          break
        case 2:
          this.checkIndex = type;
          break
        case 3:
          this.checkIndex = type;
          break
      }
    },
    rightClick(event,type){
      this.clientX = event.clientX
      this.clientY = event.clientY
      switch (type){
        case 1:
          this.menu = this.rightMenu.echartsMenu
          break
        case 2:
          this.menu = this.rightMenu.tablesMenu
          break
        case 3:
          this.menu = this.rightMenu.componentsMenu
          break
      }
    },
    operatingRightAction(event,val){
     this.$router.push({
        path: val.path,
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.mouseEvent-container{
  position: relative;
  border: 20px solid #e4edf1;
  background: #f2f6f9;
  height: calc(100vh - 220px);
}
.left-card-container{
  position: absolute;
  z-index: 2;
  width: 60%;
  height: 80%;
  top: 10%;
  left: 0;
  background: white;
  border-radius: 83px 254px 126px 190px;
}
.left-card-container:before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 83px 254px 126px 190px;
  background: linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)),url('../../../assets/image/cityBuild.png');
  background-size: 60%;
  background-repeat:no-repeat;
  background-position: 10% 80%;
}
.left-card-container:after{
  content: '';
  display: block;
  position: absolute;
  z-index: 3;
  width: 60%;
  height: 60%;
  top: 15%;
  left: 75%;
  background: #f2f6f9;
  border-radius: 60%;
  transform: rotate(-78deg);
}
.event-content{
  position: absolute;
  z-index: 10;
  width: 50%;
  height: 50%;
  top: 25%;
  left: 45%;
  background: rgba(255,255,255,0.2);
  border-radius: 110px 140px 72px 78px;
  display: flex;
}
.event-content:before{
  content: '';
  display: block;
  position: absolute;
  z-index: -3;
  width: 100%;
  height: 100%;
  background: rgba(255,241,213,0.5);
  border-radius: 110px 140px 72px 78px;
}
.event-classify{
  width: 30%;
  height: 100%;
}
.classify-container{
  width: 60%;
  height: 80%;
  border-right: 5px solid #9bc19b;
  margin: 15% 0 15% 30%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
.classify-name{
  width: 100%;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  margin-right: 10px;
}
.checkEvent{
  background: linear-gradient(to right, #f7fef7, #daf6df, #fff);
  border-left: 4px solid #ffb687
}
.event-classify-content{
  width: 70%;
  height: 100%;
}
.classify-example-container{
  width: 80%;
  height: 80%;
  margin: 7% 0;
}
.select-classify{
  margin: 10px;
  width: 90%;
  height: 90%;
  display: flex;
}
.select-content{
  width: 80%;
  height: 100%;
  text-align: left;
  line-height: 24px;
  color: #a4a4a4;
  padding-right: 20px;
  border-right: 1px dashed #cfcfcf;
}
.select-change{
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.change-button{
  cursor: pointer;
  width: 60px;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  color: white;
  background: #f6b862;
}
.copy-classify{
  margin: 10px;
  width: 90%;
  height: 90%;
  display: flex;
}
.rightKey-classify{
  width: 100%;
  height: 100%;
  display: flex;
  align-content: space-around;
  flex-wrap: wrap;
}
.common-menu{
  height: 50px;
  line-height: 50px;
  width: 80%;
  margin: 0 auto;
  background: linear-gradient(to right, #fff, #f0fcf2, #fff);
  cursor: pointer;
  border: 1px solid #ccddcc;
}
</style>

